<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/admin/assets/lib/layui/css/layui.css">
  <link rel="stylesheet" href="/admin/assets/css/link.css">
</head>

<body>
  <div class="layui-card">
    <!-- 头部链接 -->
    <div class="layui-card-header">友情链接
      <button class=" layui-btn layui-bg-blue add_link">添加链接</button>
    </div>
    <!-- 内容 -->
    <div class="layui-card-body">
      <table class="layui-table">
        <colgroup>
          <col width="5%">
          <col width="17%">
          <col width="20%">
          <col width="25%">
          <col width="12%">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>ID</th>
            <th>链接图标</th>
            <th>链接名称</th>
            <th>链接地址</th>
            <th>链接描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>

  <!-- 列表渲染模板 -->
  <script type="text/html" id="tpl-link">
        {{each data item}}
        <tr>
            <td>{{item.id}}</td>
            <td ><div class="img_bg">
                <img src="http://localhost:8888/uploads/{{item.linkicon}}" alt="" >
            </div></td>
            <td>{{item.linkname}}</td>
            <td>{{item.linkurl}}</td>
            <td>{{item.linkdesc}}</td>
            <td>
                <button class=" layui-btn layui-btn-xs edit_link" 
                data-linkname="{{item.linkname}}"
                data-linkdesc="{{item.linkdesc}}"
                data-linkurl="{{item.linkurl}}"  
                data-id="{{item.id}}"  
                >编辑</button>
                <button class=" layui-btn layui-btn-xs layui-bg-red del_link" data-id="{{item.id}}">删除</button>
            </td>
          </tr>
          {{/each}}
    </script>
  <!-- 渲染添加链接界面 -->
  <script type="text/html" id="tpl-add">
        <form class="layui-form" action="" style="margin: 20px" id="add_form">
            <div class="layui-form-item">
              <label class="layui-form-label">链接名称</label>
              <div class="layui-input-block">
                <input type="text" name="linkname" required  lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">链接地址</label>
                <div class="layui-input-block">
                  <input type="text" name="linkurl" required  lay-verify="required|url" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">链接描述</label>
                <div class="layui-input-block">
                  <input type="text" name="linkdesc" required  lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                 
                <div class="layui-input-block">
                    <input type="file" required lay-verify="required" name="linkicon" id="uploads_img" style="display:none">
                  <button type="button" class=" layui-btn layui-btn-sm up_img"> <i class=" layui-icon layui-icon-upload-drag"></i> 上传图片</button>
                </div>
              </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
    </script>
  <!-- 渲染编辑链接 -->
  <script type="text/html" id="tpl-edit">
        <form class="layui-form" lay-filter="edit" action="" style="margin: 20px" id="up_form">
            <div class="layui-form-item">
              <label class="layui-form-label">链接名称</label>
              <div class="layui-input-block">
                <input type="text" name="linkname" required  lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">链接地址</label>
                <div class="layui-input-block">
                  <input type="text" name="linkurl" required  lay-verify="required|url" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">链接描述</label>
                <div class="layui-input-block">
                  <input type="text" name="linkdesc" required  lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                 
                <div class="layui-input-block">
                    <input type="file" required lay-verify="required" name="linkicon" id="uploads_img" style="display:none">
                  <button type="button" class=" layui-btn layui-btn-sm up_img"> <i class=" layui-icon layui-icon-upload-drag"></i> 上传图片</button>
                </div>
              </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
    </script>
</body>
<!-- jQuery文件 -->
<script src="/admin/assets/lib/jquery.js"></script>
<!-- layui文件 -->
<script src="/admin/assets/lib/layui/layui.all.js"></script>
<!-- 模板引擎文件 -->
<script src="/admin/assets/lib/template-web.js"></script>

<!-- 友情链接js文件 -->
<script src="/admin/assets/js/link.js"></script>

</html>